<template>
  <div class="register">
    <div class="login-wel">欢迎！</div>
    <div class="em-rg">邮箱</div>
    <el-input 
      v-model="emailrg"
      type="email" 
      class="email-rg" 
      placeholder="请输入您的邮箱"
    />
    <div class="user-rg">用户名</div>
    <el-input 
      v-model="usernamerg"
      type="text" 
      class="username-rg" 
      placeholder="请输入您的用户名"
    />
    <div class="psw-rg">密码</div>
    <el-input
      v-model="passwordrg"
      class="password-rg"
      type="password"
      placeholder="请输入您的密码"
      show-password
    />
    <div class="psw-ag">再次输入您的密码</div>
    <el-input
      v-model="passwordagain"
      class="passwordagain"
      type="password"
      placeholder="请再次输入您的密码"
      show-password
    />
    <div class="code-text-rg">验证码</div>
    <div class="codecontent-rg">
      <el-input 
        v-model="coderg"
        type="text" 
        class="code-rg" 
        placeholder="请输入验证码"
      />
      <button class="btcode-rg">发送验证码</button>
    </div>
    <input type="submit" value="注册" class="sb-rg">
    <div class="about-lg" @click="$emit('switch-to-login')">已有账号？请登录</div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const emailrg = ref('')
    const usernamerg = ref('')
    const passwordrg = ref('')
    const passwordagain = ref('')
    const coderg = ref('')
    return {
      emailrg,
      usernamerg,
      passwordrg,
      passwordagain,
      coderg,
    }
  }
}
</script>

<style scoped>
.register {
  max-width: 400px;   /* 宽度最大为400px */
  width: 100%;         /* 使得它的宽度占据100%的容器宽度 */
  height: 600px;       /* 固定高度 */
  display: flex;
  flex-direction: column;
  padding: 25px;
  background-color: #fafafb;
  border-radius: 10px;
  margin: 0 auto;      /* 使表单居中 */
}


.login-wel {
  font-size: 24px;
  margin-bottom: 20px;

}

.em-rg, .user-rg, .psw-rg, .psw-ag, .code-text-rg {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 5px;
}

input, .el-input__inner {
  width: 100%;
  height: 50px;
  font-size: 16px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

.codecontent-rg {
  display: flex;
  align-items: center; 
  justify-content: space-between;
  height: 50px; 
}

.code-rg {
  width: 70%;
  height: 50px; 
  
  font-size: 16px;
  outline: none;
}

.btcode-rg {
  width: 24%;
  height: 50px; /* Same height as input field */
  font-size: 14px;
  background-color: #71c4ef;
  border: 1px solid #777777;
  border-radius: 6px;
}

.btcode-rg:hover {
  background-color: #33a6e0;
}

.sb-rg {
  margin-top: 30px;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  height: 50px;
}

.sb-rg:hover {
  background-color: #45a049;
}

.about-lg {
  margin-top: 40px;
  text-align: center;
  color: #888;
}

.about-lg:hover {
  color: #000;
  font-weight: bold;
}

/* Media Queries for responsiveness */
@media (max-width: 600px) {
  .register {
    padding: 20px;
    width: 90%;
    height: auto;
  }

  .el-input__inner, .code-rg {
    font-size: 14px;
  }

  .btcode-rg {
    font-size: 12px;
    height: 40px;
  }

  .sb-rg {
    font-size: 16px;
  }

  .login-wel {
    font-size: 20px;
  }
}
</style>
